<template>
<div>
  <div class="center">
    <h2 :style="{textAlign:'center',marginBottom:'40px'}">websheet测试页面</h2>
    <a-row :gutter="16">
      <a-col :span="6">
        <a-card hoverable @click="goto('/forms/metaList')">
          <template slot="actions" class="ant-card-actions">
            <a-icon type="link" />
          </template>
          <h3>报表管理页面</h3>
          <p class="myPBox">1、需要先创建报表</p>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card hoverable @click="goto('/forms/templateList')">
          <template slot="actions" class="ant-card-actions">
            <a-icon type="link" />
          </template>
          <h3>模板管理页面</h3>
          <p class="myPBox">2、给报表创建一个基础模板，点击模板配置上传模板保存，保存模板后点击指标数据集配置进行相关配置</p>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card hoverable @click="goto('/forms/reportStatus')">
          <template slot="actions" class="ant-card-actions">
            <a-icon type="link" />
          </template>
          <h3>报表补录配置</h3>
          <p class="myPBox">3、配置需要补录的报表，报表代码等信息要和报表管理页面信息一致</p>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card hoverable @click="goto('/forms/dataList')">
          <template slot="actions" class="ant-card-actions">
            <a-icon type="link" />
          </template>
          <h3>数据补录</h3>
          <p class="myPBox">4、指标或数据集配置完成后自动生成数据补录，点击查看或修改展示自动抓取的数据</p>
        </a-card>
      </a-col>
    </a-row>
  </div>
  <p class="myFooter">接口调用说明</p>
  </div>
</template>
<script>
export default {
  name: 'TextPage',
  methods: {
    goto(url) {
      let routeData = this.$router.resolve({ path: url});
      window.open(routeData.href, '_blank');
    },
  },
}
</script>
<style scoped>
.center {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -50%);
}
.myPBox{
  height: 80px;
  line-height: 25px;
  overflow: hidden;
  color: #008dff;
}
.myFooter{
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 20px;
  text-align: center;
}
</style>